<template>
  <div class="list-view">
    <div v-for="(item, index) in options" :key="index">
      <ListViewItem
        :thumb="item[`${prop.thumb}`]"
        :title="item[`${prop.title}`]"
        :extra="item[`${prop.extra}`]"
        :class="{active: item[`${prop.value}`] === activeMenu}"
        @triggerItem="triggerItem(item[`${prop.value}`])"
      >
      </ListViewItem>
    </div>
  </div>
</template>
<script>
import ListViewItem from './ListViewItem'
export default {
  /**
   * 单个连续模块垂直排列列表组件
   */
  name: 'ListView',
  props: {
    // 数据属性
    prop: {
      type: Object,
      default: () => {
        return {
          thumb: 'thumb',
          value: 'value',
          title: 'title',
          extra: 'extra'
        }
      }
    },
    // 渲染数组
    options: {
      type: Array,
      default: () => { return [] }
    },
    activeMenu: {
      type: String,
      default: null
    }
  },
  data () {
    return {
    }
  },
  components: {ListViewItem},
  created () {
  },
  methods: {
    triggerItem (v) {
      this.$emit('handleListItem', v)
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.list-view {
  .active {
    background-color: #eeee;
  }
}
</style>
